<template>
  <div v-bind:id="id" v-bind:data="data"></div>
</template>
 
<script>
import $echarts from 'echarts'

export default {
  name: 'baseEchartsAllComponent',
  data() {
    return {
      ChartLineGraph: null
    }
  },
  //  深度监听 父组件刚开始没有值，只有图标的配置项
  //  父组件ajax请求后改变数据的值，传递过来，图标已生成，监听传过来的值的改变
  // deep:true.深度监听，确保data中子项修改也能监听到。写法参考：https://cn.vuejs.org/v2/api/#watch
  watch: {
    data: {
      handler(newvalue) {
        this.drawLineGraph(this.id, newvalue)
      },
      deep: true
    }
  },
  props: ['id', 'data'],
  mounted() {
    this.drawLineGraph(this.id, this.data)
  },
  methods: {
    drawLineGraph(id, data) {
      let _this = this
      let myChart = document.getElementById(id)
      this.ChartLineGraph = $echarts.init(myChart)
      this.ChartLineGraph.setOption(data)
      window.addEventListener('resize', function() {
        _this.ChartLineGraph.resize()
      })
    }
  },
  beforeDestroy() {
    if (this.ChartLineGraph) {
      this.ChartLineGraph.clear()
    }
  }
}
</script>
 
<style scoped>
</style>